<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>填写订单</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="./css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<link href="../mui/css/mui.picker.css" rel="stylesheet" />
		<link href="../mui/css/mui.poppicker.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../mui/css/mui.picker.min.css" />
		<style type="text/css">
			.mui-content>.mui-table-view:first-child {
				margin-top: 1.2rem;
			}
			
			.mui-table-view {
				padding: 1.2rem;
				border-radius: 0.4rem;
			}
			
			.mui-table-view:before,
			.mui-table-view:after,
			.mui-table-view-cell:before,
			.mui-table-view-cell:after,
			.mui-input-group:before,
			.mui-input-group:after,
			.mui-input-group .mui-input-row:after {
				background-color: transparent;
			}
			
			.mui-table-view-cell {
				padding: 0;
			}
			
			.mui-table-view-cell label {
				font-size: 1.4rem;
				color: #999;
			}
			
			.mui-table-view-cell.mui-active {
				background-color: #fff;
			}
			
			.mui-table-view-cell>a:not(.mui-btn) {
				white-space: inherit;
			}
			
			.order-bgcolor {
				padding: 1.2rem;
				background: linear-gradient(to right, #fd66a9, #e61874);
			}
			
			.hotel-head,
			.hotel-room,
			.hotel-price,
			.hotel-reduce {
				display: flex;
				justify-content: space-between;
			}
			
			.hotel-head .type {
				font-size: 1.4rem;
				color: #333;
			}
			
			.hotel-room span {
				font-size: 1.4rem;
				color: #999;
			}
			
			.hotel-room .favorable {
				font-size: 1.2rem;
				color: #e61874;
				padding-left: 0.6rem;
			}
			
			.mui-numbox {
				position: relative;
				display: inline-block;
				overflow: hidden;
				width: 10rem;
				height: 3rem;
				padding: 0 2.8rem;
				border: none;
				background-color: transparent;
			}
			
			.mui-numbox .mui-input-numbox {
				font-size: 1.4rem;
				border: none !important;
			}
			
			html input[disabled] {
				color: #000 !important;
			}
			
			.mui-table-view-cell__bd {
				-webkit-box-flex: 1;
				-webkit-flex: 1;
				flex: 1;
			}
			
			.font10 {
				font-size: 1rem;
			}
			
			.font12 {
				font-size: 1.2rem;
				color: #999;
			}
			
			.font14 {
				font-size: 1.4rem;
				color: #999;
			}
			
			.f-font14 {
				font-size: 1.4rem;
				color: #666;
			}
			
			.font16 {
				font-size: 1.6rem;
				color: #333;
			}
			
			.show {
				display: block;
			}
			
			.hotel-name {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;
			}
			
			.hotel-name div {
				position: relative;
				font-size: 1.6rem;
				padding: 0 0 1.5rem;
			}
			
			.hotel-name div:after {
				position: absolute;
				width: 100%;
				bottom: 0;
				left: 0;
				height: 0.2rem;
				content: '';
				background-color: #e61874;
				border-radius: 0.2rem;
			}
			
			.data-wrap {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 0;
				text-align: center;
			}
			
			.data-item {
				font-size: 1.4rem;
			}
			
			.data-stay {
				font-size: 1.2rem;
				display: inline-block;
				min-width: 6rem;
				height: 1.8rem;
				line-height: 1.6rem;
				text-align: center;
				border: 1px solid #e61874;
				border-radius: 1.8rem;
			}
			
			.content-wrap {
				margin: 1.2rem 0;
			}
			
			.flex {
				display: flex;
				align-items: center;
			}
			
			.stay-time {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 1.2rem;
			}
			
			.favorable {
				width: 3.5rem;
				vertical-align: middle;
			}
			
			.mui-numbox [class*=btn-numbox] {
				width: 2.4rem;
				height: initial;
				margin-top: 0.3rem;
				background-color: transparent;
				-webkit-user-select: none;
			}
			
			.add-sub {
				display: flex;
				align-items: center;
				font-size: 0;
			}
			
			.mui-numbox input {
				border: none;
				outline: none;
				width: 2.8rem;
				text-align: center;
			}
			
			li.username {
				display: flex;
				align-items: baseline;
			}
			
			#username-wrap {
				width: 55%;
				text-align: right;
			}
			
			li.room,
			li.username,
			li.tel {
				justify-content: space-between;
				padding-bottom: 0.8rem;
			}
			
			li.room {
				padding-right: 1.2rem;
			}
			
			li.username {
				padding-right: 1.2rem;
			}
			
			li.tel {
				padding-right: 1.2rem;
				padding-bottom: 0;
			}
			
			li.username input,
			li.tel input {
				width: 55%;
				height: 3rem;
				font-size: 1.4rem;
				color: #333;
				text-align: right;
				letter-spacing: 1px;
				padding: 0;
				margin-bottom: 0;
				border: none;
				background: transparent;
			}
			
			li.username input {
				width: 100%;
			}
			
			li.tel label {
				position: relative;
			}
			
			li.tel label:after {
				position: absolute;
				content: '';
				right: -2.1rem;
				bottom: 0;
				width: 0.8rem;
				height: 1.4rem;
				background: url(../styles/images/order/icon_direction_red.png@2x.png) no-repeat;
				background-size: 0.8rem 1.4rem;
			}
			
			li.tel label.active:after {
				position: absolute;
				content: '';
				right: -2.1rem;
				bottom: 2px;
				width: 1.4rem;
				height: 0.8rem;
				background: url(../styles/images/order/icon_direction_down_red.png@2x.png) no-repeat;
				background-size: 1.4rem 0.8rem;
			}
			
			.icon {
				font-size: 0;
				padding-left: 0.9rem;
			}
			
			.option {
				width: 80%;
				line-height: 1.6rem;
				font-size: 1.4rem;
				color: #333;
				text-align: left;
				padding-left: 3rem;
			}
			
			.mui-btn-blue {
				border: 1px solid #e61874;
				background-color: #e61874;
			}
			
			.invoice {
				padding: 0.8rem 1.2rem;
				background: #fff;
			}
			
			.invoice li {
				justify-content: space-between;
			}
			
			#invoice-pop {
				display: none;
				opacity: 1;
				left: 0 !important;
				right: 0;
				bottom: 0;
				top: auto !important;
				margin: auto;
				padding: 2rem 1.2rem 4.5rem 2.4rem;
				background-color: #fff;
			}
			
			#invoice-pop li {
				display: flex;
				align-items: center;
				padding-bottom: 3rem;
			}
			
			#invoice-pop li:last-child {
				padding-bottom: 0;
			}
			
			#invoice-pop li .left {
				width: 30%;
				padding-right: 1rem;
			}
			
			.mui-switch-blue {
				border: 2px solid #e4e4e4;
			}
			
			.mui-switch-blue.mui-active {
				background-color: #e61874;
				border: 2px solid #e61874;
			}
			
			.stay-hobby {
				padding: 1.5rem 1.2rem;
				margin-top: 0.6rem;
			}
			
			.stay-hobby li {
				justify-content: space-between;
			}
			
			.stay-hobby li div {
				display: flex;
				align-items: center;
				width: 95%;
			}
			
			.hotel-list-price {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
			}
			
			.hotel-list-price span {
				color: #ff3399;
			}
			
			.tip {
				display: inline-block;
				font-size: 1.2rem;
				line-height: 1.6rem;
				color: #999;
				padding: 1.2rem 1.2rem 5rem;
			}
			
			.detail-con {
				position: fixed;
				bottom: 4.5rem;
				left: 0;
				width: 100%;
				display: none;
			}
			
			.detail-con ul {
				padding: 1.5rem 1.2rem;
				background-color: #fff;
			}
			
			.detail-pri {
				display: flex;
				justify-content: space-between;
				padding-bottom: 2.1rem;
			}
			
			.detail-pri .text {
				font-size: 1.6rem;
				color: #333;
			}
			
			.detail-pri .pri-item {
				font-size: 1.8rem;
				color: #e61874;
			}
			
			.detail-date {
				display: flex;
				justify-content: space-between;
				padding-bottom: 1.5rem;
			}
			
			.foot {
				position: fixed;
				bottom: 0;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				width: 100%;
				height: 4.5rem;
				padding-left: 1.2rem;
				border-top: 1px solid #e0e0e0;
				background-color: #fff;
				z-index: 998;
			}
			
			.price div {
				display: flex;
				align-items: flex-end;
				font-size: 0;
			}
			
			.details {
				position: relative;
				/*line-break: 2.25rem;*/
				font-size: 0;
				padding-right: 2.25rem;
			}
			
			.details span {
				font-size: 1.2rem;
				color: #999;
			}
			
			.details span:after {
				position: absolute;
				content: '';
				right: 0.6rem;
				bottom: 0.3rem;
				width: 1.05rem;
				height: 0.6rem;
				background: url(../styles/images/order/icon_direction_up.png@2x.png) no-repeat;
				background-size: 1.05rem 0.6rem;
			}
			
			.details span.active:after {
				position: absolute;
				content: '';
				right: 0.6rem;
				bottom: 0.3rem;
				width: 1.05rem;
				height: 0.6rem;
				background: url(../styles/images/order/icon_direction_up.png@2x.png) no-repeat;
				background-size: 1.05rem 0.6rem;
			}
			
			#details-con {
				left: 0 !important;
				top: auto !important;
				right: 0;
				bottom: 4.5rem;
				margin: auto;
				padding: 1.5rem 1.2rem;
				background-color: #fff;
			}
			
			.mui-popover {
				width: 100%;
				border-radius: 0;
			}
			
			.mui-popover .mui-popover-arrow {
				width: 0;
				height: 0;
			}
			
			.sum {
				font-size: 1.4rem;
				color: #e61874;
			}
			
			.fan {
				font-size: 1.2rem;
				color: #666;
			}
			
			.right {
				display: flex;
				align-items: center;
			}
			
			.submit {
				width: 13.8rem;
				height: 4.5rem;
				line-height: 4.5rem;
				font-size: 1.8rem;
				text-align: center;
				border: none;
				color: #fff;
				background-color: #e61874;
			}
			
			input[type=text] {
				width: 70%;
				height: 1.6rem;
				font-size: 1.4rem;
				margin-bottom: 0;
				padding-left: 0;
				border-color: transparent;
				background: transparent;
			}
			
			.mui-checkbox.mui-left label {
				padding-left: 4rem;
			}
			
			.mui-checkbox.mui-left input[type=checkbox] {
				left: 0;
			}
			
			.mui-checkbox input[type=checkbox] {
				top: 0.8rem;
				left: 0;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #e61874;
			}
			
			.mui-checkbox label {
				padding-left: 5.8rem;
				padding-right: 0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">填写订单</h1>
		</header>
		<div class="mui-content">
			<!-- 订单详情--开始 -->
			<div id="order-detail" class="order-bgcolor">
				<ul class="mui-table-view" data-url="./order-detail2.html">
					<li class="hotel-name">
						<div style="color: #e61874;">深圳雅商会馆</div>
					</li>
					<li class="mui-table-view-cell" style="padding: 1.5rem 0;">
						<div class="mui-table-view-cell__bd data-wrap">
							<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>04月07日</span></span>
							<span class="data-stay">共1晚</span>
							<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>04月08日</span></span>
						</div>
					</li>
					<li class="hotel-room">
						<span class="font14">标准单人间<!--<span class="favorable">最优惠</span>--></span>
						<span class="font14">含单早</span>
					</li>
				</ul>
			</div>
			<!-- 订单详情--结束 -->

			<ul class="mui-table-view content-wrap">
				<li class="mui-table-view-cell room flex">
					<label class="font14">房间数</label>
					<div class="add-sub">
						<div class="mui-numbox" data-numbox-min='1'>
							<img id="sub" class="mui-btn mui-btn-numbox-minus" src="../styles/images/order/icon_reduction.png@2x.png" />
							<input id="roomnum" class="mui-input-numbox" type="number" value="1" style="border: none;" disabled="" />
							<img id="add" class="mui-btn mui-btn-numbox-plus" src="../styles/images/order/icon_add.png@2x.png" />
						</div>
						<span class="font14" style="color:#333;margin-left: 1.5rem;">间</span>
					</div>
				</li>
				<li class="mui-table-view-cell username">
					<label class="font14">入住人</label>
					<div id="username-wrap">
						<input id="userName" class="userName" type="text" name="userName" placeholder="请输入您的姓名" value="王敏" />
					</div>
					<!--<img width="24" src="../styles/images/order/icon_add.png@2x.png" />-->
				</li>
				<li class="mui-table-view-cell tel flex">
					<label class="font14" id="showUserPicker">中国大陆(+86)</label>
					<input id="userResult" type="number" placeholder="用于接收预定通知" value="18569035251" />
				</li>
			</ul>
			<ul class="invoice">
				<li class="flex">
					<span class="font14">需要发票</span>
					<div class="mui-switch mui-switch-blue mui-switch-mini">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
			</ul>
			</ul>
			<ul class="mui-table-view stay-hobby" data-url="./stay-hobby.html">
				<li class="flex">
					<div class="">
						<label class="font14">住宿偏好</label>
						<span class="option">无</span>
						<!--尽量安排位置安静的房间<br />7892455-->
					</div>
					<img width="7.5" src="../styles/images/order/icon_direction_right.png@2x.png" />
				</li>
			</ul>

			<div class="tip">
				<span>本产品为向酒店或代理商申请的特殊价格产品，无法确保预订成功；订单提交将立即扣款，若预订不成功，房费将原路退还至付款账户中。</span>
			</div>
		</div>

		<div class="foot" id="foot">
			<div class="price">
				<div><span class="font10" style="color: #e61874;">￥</span><span class="sum">298</span></div>
				<!--<span class="fan">返￥60</span>-->
			</div>
			<div class="right">
				<a class="details" id="detail-tap">
					<span>明细</span>
				</a>
				<span id="submit" class="submit">提交订单</span>
			</div>
			<!-- 详情-->
			<div id="details-con" class="mui-popover" style="">
				<div class="mui-popover-arrow" style="z-index: 0 !important;"></div>
				<ul>
					<li class="mui-table-view-cell detail-pri">
						<span class="text">总金额</span>
						<span class="pri-item">¥278</span>
					</li>
					<li class="mui-table-view-cell detail-date">
						<span class="font12">2017年4月7日</span>
						<span class="font12">含早</span>
					</li>
					<li class="mui-table-view-cell">
						<span class="font12">￥288-10=￥278</span>
					</li>
				</ul>
			</div>

			<div id="invoice-pop" class="mui-popover">
				<div class="mui-popover-arrow" style="z-index: 0 !important;"></div>
				<ul>
					<li class="mui-table-view-cell">
						<span class="left font16">发票类型</span>
						<span id="invoice-type" class="f-font14">纸质发票</span>
					</li>
					<li class="mui-table-view-cell">
						<span class="left font16">发票明细</span>
						<span id="invoice-detail" class="f-font14">代订住宿费</span>
					</li>
					<li class="mui-table-view-cell">
						<span class="left font16">发票抬头</span>
						<input id="invoice-title" type="text" placeholder="请输入发票抬头" value="情趣酒店" />
					</li>
					<li class="mui-table-view-cell">
						<span class="left font16">邮寄地址</span>
						<input id="invoice-address" type="text" placeholder="用于邮寄发票" value="软件产业基地" />
					</li>
					<form class="mui-input-group">
						<div class="mui-input-row mui-checkbox mui-left">
							<label style="font-size: 1.4rem;color:#333;">发票注明酒店名称和入住离店信息</label>
							<input name="checkbox" value="Item 1" type="checkbox">
						</div>
					</form>
				</ul>
			</div>
		</div>
		<div id="backdrop" class="mui-backdrop" style="display: none;z-index: 999;"></div>

		<script src="../mui/js/mui.min.js"></script>
		<script src="../libs/ems.js" data-main='./city.js'></script>
		<script src="../mui/js/mui.picker.js"></script>
		<script src="../mui/js/mui.picker.min.js"></script>
		<script src="../mui/js/mui.poppicker.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'pay-orders.html',
					url: 'pay-orders.html'
				}],
				swipeBack: true //启用右滑关闭功能
			});

			var areacode = '+86';
			// 地区号码
			(function($, doc) {
				$.init();
				$.ready(function() {
					//普通示例
					var userPicker = new $.PopPicker();
					userPicker.setData([{
						value: '+86',
						text: '中国大陆(+86)'
					}, {
						value: '+852',
						text: '中国香港(+852)'
					}, {
						value: '+853',
						text: '中国澳门(+853)'
					}]);

					var showUserPickerButton = doc.getElementById('showUserPicker');
					showUserPickerButton.addEventListener('tap', function(event) {
						showUserPickerButton.classList.add("active");
						userPicker.show(function(items) {
							showUserPicker.innerText = items[0].text;
							areacode = items[0].value;
							showUserPickerButton.classList.remove("class", "active");
						});
					}, false);
				});
			})(mui, document);

			var orderDetail = document.getElementById("order-detail"); // 酒店信息
			var priceSum = document.getElementsByClassName("sum")[0]; // 酒店价格
			var detailsCon = document.getElementById("details-con"); // 酒店明细
			var hotelid; // 酒店ID
			var roomtypeid; // 房型ID
			var rateplanid; // 价格计划ID
			var topTitle; // 酒店名称
			var userid = "123456"; // 手机用户id
			var date = new Date();
			var fullYear = date.getFullYear(); // 完整的年
			var month = date.getMonth() + 1; // 月份
			var day = date.getDate(); // 日期
			if(month < 10) {
				month = "0" + month;
			}

			if(day < 10) {
				day = "0" + day;
			}

			var data = JSON.parse(localStorage.getItem('data')); // 从缓存里获取有关时间的数据
			console.log("缓存数据" + JSON.stringify(data));

			var checkindate = fullYear + "-" + data.startM + "-" + data.startD; // 入店日期
			var checkoutdate = fullYear + "-" + data.endM + "-" + data.endD; // 离店日期
//			var datanum = data.datanum; // 入住几晚
			var roomnum = document.getElementById("roomnum").value; // 房间数

			var usernameWrap = document.getElementById("username-wrap"); // 入住人包裹层
			var add = document.getElementById("add"); // 增加按钮
			var sub = document.getElementById("sub"); // 减少按钮
			var childs; // usernameWrap包裹层的子元素个数
			var userNameInput = document.getElementsByClassName("userName"); // 入住人输入框的个数

			// 增加入住人输入框
			add.addEventListener('tap', function() {
				var inputobj = document.createElement("input"); // 创建输入框对象
				inputobj.className = "userName";
				inputobj.name = "userName";
				inputobj.type = "text";
				inputobj.placeholder = "请输入您的姓名";
				usernameWrap.appendChild(inputobj); // 将输入框追加到usernameWrap包裹层中
				roomnum = userNameInput.length;
//				console.log("加房间数:" + userNameInput.length);
			});

			// 减少入住人输入框
			sub.addEventListener('tap', function() {
				childs = usernameWrap.childNodes; // usernameWrap包裹层下的子元素个数
				usernameWrap.removeChild(childs[userNameInput.length + 1]); // 从最后一个子元素开始删除
				roomnum = userNameInput.length;
//				console.log("减房间数:" + userNameInput.length);
			});

			var totalamount; // 订单总金额
			var saledate = fullYear + "-" + month + "-" + day; // 售卖日期
			var guestname = ''; // 客户名字
			var linkmanphone = ''; // 联系电话
			var itemBed; // 床型
			var breakfast;
			var price;
			var cashback;
			var st;
			var datanum;
			var et;
			//添加newId自定义事件监听
			window.addEventListener('fioId', function(event) {
				//获得事件参数
				hotelid = event.detail.hotelid;
				roomtypeid = event.detail.roomtypeid;
				rateplanid = event.detail.rateplanid;
				topTitle = event.detail.topTitle;
				itemBed = event.detail.itemBed;
				breakfast = event.detail.breakfast;
				price = event.detail.price;
				cashback = event.detail.cashback;
				st = event.detail.st;
				datanum = event.detail.datanum;
				et = event.detail.et;

				totalamount = parseFloat(price - cashback).toFixed(2);
				// console.log(totalamount);

				var orderHtml = '';
				var detailsConHtml = '';

				orderHtml += '<ul class="mui-table-view">';
				orderHtml += '<li class="hotel-name">';
				orderHtml += '<div id="" style="color: #e61874;">' + topTitle + '</div></li>';
				orderHtml += '<li class="mui-table-view-cell" style="padding: 15px 0;">';
				orderHtml += '<div class="mui-table-view-cell__bd data-wrap">';
				orderHtml += '<span class="data-item"><span class="font10">入住</span>&nbsp;-&nbsp;<span>' + st + '</span></span>';
				orderHtml += '<span class="data-stay">共' + datanum + '晚</span>';
				orderHtml += '<span class="data-item"><span class="font10">离店</span>&nbsp;-&nbsp;<span>' + et + '</span></span>';
				orderHtml += '</div></li>';
				orderHtml += '<li class="hotel-room">';
				orderHtml += '<span class="font14">' + itemBed + '</span>';
				orderHtml += '<span class="font14">' + breakfast + '</span></li></ul>';

				detailsConHtml += '<li class="mui-table-view-cell detail-pri"><span class="text">总金额</span>';
				detailsConHtml += '<span class="pri-item">¥' + price + '</span></li>';
				detailsConHtml += '<li class="mui-table-view-cell detail-date">';
				detailsConHtml += '<span class="font12">' + fullYear + '年' + st + '</span>';
				detailsConHtml += '<span class="font12">' + breakfast + '</span></li>';
				detailsConHtml += '<li class="mui-table-view-cell">';
				detailsConHtml += '<span class="font12">￥' + price + '-' + cashback + '=￥' + totalamount + '</span></li>';

				orderDetail.innerHTML = orderHtml;
				detailsCon.innerHTML = detailsConHtml;

				priceSum.innerHTML = totalamount; // 底部酒店价格

			});

			// 是否需要发票
			var backdrop = document.getElementById("backdrop"); // 获取遮罩层
			var foot = document.getElementById("foot"); // 底部
			var invoicePop = document.getElementById("invoice-pop"); // 发票弹出框
			var invoiceTitle = document.getElementById("invoice-title"); // 发票抬头
			var invoiceAddress = document.getElementById("invoice-address"); // 发票邮寄地址
			var invoiceType = document.getElementById("invoice-type"); // 发票类型
			var invoiceDetail = document.getElementById("invoice-detail"); // 发票明细

			var typeCon = ''; // 发票类型
			var detailCon = ''; // 发票明细
			var titCon = ''; // 获取发票抬头
			var addrCon = ''; // 发票邮寄地址
			var isneed = ''; // 是否需要发票

			var muiSwitch = document.getElementsByClassName("mui-switch")[0];
			var checkValue;
			var invoiceInfo = [];
			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				this.addEventListener('toggle', function(event) {
					if(event.detail.isActive) {
						invoicePop.style.display = 'block'; // 发票弹出框显示
						backdrop.style.display = "block"; // 遮罩层显示
						backdrop.style.opacity = 1; // 遮罩层显示
						foot.style.zIndex = 1000; // 底部不被遮挡
					}
				});

				// 发票注明酒店名称和入住离店信息
				mui('.mui-input-group').on('change', 'input', function() {
					checkValue = this.checked;
					if(checkValue) {
						invoiceInfo = [topTitle, checkindate, checkoutdate];
					} else {
						invoiceInfo = [];
					}
				});

				// 监听点击遮罩关闭事件
				document.getElementById("backdrop").addEventListener('tap', function() {
					backdrop.style.display = "none";
					backdrop.style.opacity = 0;
					invoicePop.style.display = "none";
					foot.style.zIndex = 998;
					typeCon = invoiceType.innerHTML; // 发票类型
					detailCon = invoiceDetail.innerHTML; // 发票明细
					// console.log(typeCon + ',' + detailCon);
					titCon = invoiceTitle.value; // 获取发票抬头
					addrCon = invoiceAddress.value; // 获取发票的邮寄地址
					if (titCon == null || titCon == '' || addrCon == null || addrCon == '') {
						isneed = "不需要";
					} else{
						isneed = "需要";
					}
					muiSwitch.classList.remove("mui-active");
					muiSwitch.children[0].style.transform = "translate(0px, 0px)";
					invoiceInfo = invoiceInfo; // 关闭遮罩层时获取酒店名称和入住离店信息
				});
			});

			// 点击底部明细，弹出遮罩层和明细信息
			var detailTap = document.getElementById("detail-tap");
			var detailsCon = document.getElementById("details-con");
			var j = 0;
			detailTap.addEventListener('tap', function() {
				j++;
				if(j % 2 == 1) {
					detailTap.children[0].classList.add("active");
					backdrop.style.display = "block";
					backdrop.style.opacity = 1;
					foot.style.zIndex = 1000;
					detailsCon.style.display = "block";
					detailsCon.style.opacity = 1;
				} else if(j % 2 == 0) {
					detailTap.children[0].classList.remove("active");
					backdrop.style.display = "none";
					backdrop.style.opacity = 0;
					foot.style.zIndex = 998;
					detailsCon.style.display = "none";
					detailsCon.style.opacity = 0;
				}

				// 监听点击遮罩关闭事件
				document.getElementById("backdrop").addEventListener('tap', function() {
					detailTap.children[0].classList.remove("active");
					backdrop.style.display = "none";
					backdrop.style.opacity = 0;
					detailsCon.style.display = "none";
					detailsCon.style.opacity = 0;
					j = 0;
				});
			});

			// 住宿偏好，偏好要求
			var needopt = document.getElementsByClassName("option")[0];
			window.addEventListener('fillID', function(event) {
				needopt.innerHTML = event.detail.need + "<br />" + event.detail.textinput;
			});

			// 提交订单
			var payOrdersPage = null;
			var payOrderData;
			// 添加列表项的点击事件
			mui('#foot').on('tap', '#submit', function(event) {
				console.log("点击");
				var userNameArr = [];
				// console.log("输入框的长度：" + userNameInput.length);
				for(var j = 0; j < userNameInput.length; j++) {
					if(userNameInput[j].value == '' || userNameInput[j] == null) {
						mui.alert('请输入入住人姓名！');
						return;
					}
					userNameArr.push(userNameInput[j].value);
					// console.log("name值为userName的输入框：" + userNameInput[j].value);
				}
				// console.log(userNameArr);

				linkmanphone = areacode + document.getElementById('userResult').value; // 联系方式
				if(linkmanphone == '+86' || linkmanphone == '+852' || linkmanphone == '+853') {
					mui.alert('请输入联系方式！');
					return;
				}

				mui.ajax('http://www.aiai.com/api/order', {
					data: {
						hotelid: hotelid, // 酒店ID
						roomtypeid: roomtypeid, // 房型ID
						rateplanid: rateplanid, // 价格计划ID
						userid: userid, // 手机用户
						hotelname: topTitle, // 酒店名称
						checkindate: checkindate, // 入店日期
						checkoutdate: checkoutdate, // 离店日期
						roomnum: roomnum, // 房间数量
						totalamount: totalamount, // 订单总金额
						saledate: saledate, // 售卖日期
						guestname: userNameArr, // 客户名字
						linkmanphone: linkmanphone, // 联系电话
						typeCon: typeCon, // 发票类型
						detailCon: detailCon, // 发票类型
						titCon: titCon, // 获取发票抬头
						addrCon: addrCon, // 获取发票的邮寄地址
						isneed: isneed, // 是否需要发票
						needopt: needopt.innerHTML, // 住宿偏好
						invoiceInfo: invoiceInfo // 发票是否需要酒店名称及入离店信息
					},
					dataType: 'json',
					type: 'post',
					success: function(data) {
						console.log("发送请求成功");
						payOrderData = data;
						console.log(JSON.stringify(payOrderData));
						// 获得酒店详情页
						if(!payOrdersPage) {
							payOrdersPage = plus.webview.getWebviewById('pay-orders.html');
						}
						// 触发详情页的hdID事件
						mui.fire(payOrdersPage, 'poID', {
							payOrderData: payOrderData, // 提交后返回的酒店订单详情
							price: price, // 原价
							cashback: cashback, // 立减金额
							datanum: datanum, // 住几晚
							itemBed: itemBed, // 房型
							breakfast: breakfast, // 是否含早
							totalamount: totalamount // 最终支付金额
						});
						// 打开酒店详情页面
						mui.openWindow({
							id: 'pay-orders.html',
							show: {
								autoShow: true
							}
						});
					}
				});
			});
		</script>
	</body>

</html>